export default {
  data () {
    return {
      temperatureEchart: null,
      temperatureOption: {
        title: {
          text: '{a|温度：}{b|0}{c|℃}   {a|噪音：}{b|0}{c|dB}',
          verticalAlign: 'bottom',
          textStyle: {
            rich: {
              a: {
                color: '#a8c5ed',
                fontSize: 14
              },
              b: {
                color: '#fff',
                verticalAlign: 'bottom',
                fontSize: 24
              },
              c: {
                color: '#fff',
                lineHeight: 15,
                fontSize: 12
              }
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(9, 37, 56, 0.5)',
          extraCssText: 'box-shadow: 0 0 5px 2px rgba(8, 69, 69) inset;',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          right: 0,
          itemWidth: 25,
          itemHeight: 2,
          padding: [10, 0, 0, 0],
          textStyle: {
            color: '#a8c5ed'
          },
          data: [{name: '温度(℃)', icon: 'rect'}, {name: '噪音(dB)', icon: 'rect'}]
        },
        grid: {
          left: 15,
          right: 15,
          bottom: 0,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['6:30', '7:00', '7:30', '8:00', '8:30'],
            axisLabel: {
              color: '#a8c5ed'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#214a60',
                width: 2
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#a8c5ed'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '℃',
            nameTextStyle: {
              color: '#a8c5ed'
            },
            axisLabel: {
              color: '#a8c5ed'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#214a60',
                width: 2
              }
            },
            splitLine: {
              lineStyle: {
                color: '#214052'
              }
            },
            position: 'left'
          },
          {
            type: 'value',
            name: 'dB',
            nameTextStyle: {
              color: '#a8c5ed'
            },
            axisLabel: {
              color: '#a8c5ed'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#214a60',
                width: 2
              }
            },
            splitLine: {
              lineStyle: {
                color: '#214052'
              }
            },
            position: 'right'
          }
        ],
        series: [
          {
            name: '温度(℃)',
            type: 'line',
            yAxisIndex: 0,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(111, 103, 44, 0.9)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(111, 103, 44, 0.1)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            },
            itemStyle: {
              color: '#ecb807',
              opacity: 0
            },
            // data: [17, 19, 21, 17, 27]
            data: []
          },
          {
            name: '温度阈值线',
            type: 'line',
            yAxisIndex: 0,
            areaStyle: {
              opacity: 0
            },
            label: {
              show: true,
              formatter: '温度阈值线'
            },
            itemStyle: {
              color: 'rgba(78, 215, 137, 0.7)'
            },
            lineStyle: {
              width: 1,
              type: 'dashed'
            },
            data: []
          },
          {
            name: '噪音(dB)',
            type: 'line',
            yAxisIndex: 1,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(1, 181, 203, 0.9)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(1, 181, 203, 0.1)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            },
            itemStyle: {
              color: '#01c9e0',
              opacity: 0
            },
            // data: [47, 55, 32, 60, 62]
            data: []
          },
          {
            name: '噪音阈值线',
            type: 'line',
            yAxisIndex: 1,
            areaStyle: {
              opacity: 0
            },
            label: {
              show: true,
              formatter: '噪音阈值线'
            },
            itemStyle: {
              color: 'rgba(1, 181, 203, 0.7)'
            },
            lineStyle: {
              width: 1,
              type: 'dashed'
            },
            data: []
          }
        ]
      }
    }
  },
  methods: {
    initTemperature () {
      if (this.temperatureEchart) {
        this.$echarts.dispose(this.$refs.temperature)
        this.temperatureOption.series.forEach(item => {
          item.data = []
        })
      }
      if (this.dustStageData.dustData) {
        let today = Number.parseInt(this.$moment().format('HH:mm').replace(/:/g, ''))
        this.temperatureOption.xAxis[0].data = this.dustStageData.dustData.temp.map(item => item.time).filter(time => Number.parseInt(time.replace(/:/g, '')) < today)
        let {noiseMax, tempMax} = this.dustStageData.dustData
        this.temperatureOption.title.text = `{a|温度：}{b|${tempMax}}{c|℃}   {a|噪音：}{b|${noiseMax}}{c|dB}`
        this.initTemp(today)
        this.initNoise(today)
      }
      this.temperatureEchart = this.$echarts.init(this.$refs.temperature)
      this.temperatureEchart.setOption(this.temperatureOption)
    },
    initTemp (today) {
      let tempData = []
      let tempAlarm = []
      this.dustStageData.dustData.temp.forEach((item, index) => {
        if (Number.parseInt(item.time.replace(/:/g, '')) < today) {
          let obj = {
            name: this.dustStageData.tempAlarm,
            value: this.dustStageData.tempAlarm
          }
          if (index === 0) {
            obj.symbol = 'circle'
            obj.symbolSize = 1
            obj.label = {show: true, color: '#a8c5ed', position: [0, -15]}
          } else {
            obj.itemStyle = {opacity: 0}
          }
          tempAlarm.push(obj)
          tempData.push(item.value)
        }
      })
      this.temperatureOption.series[0].data = tempData
      this.temperatureOption.series[1].data = tempAlarm
    },
    initNoise (today) {
      let noiseData = []
      let noiseAlarm = []
      let start = true
      this.dustStageData.dustData.noise.forEach((item, index) => {
        if (Number.parseInt(item.time.replace(/:/g, '')) < today) {
          let obj = {
            name: this.dustStageData.noiseAlarm,
            value: this.dustStageData.noiseAlarm
          }
          obj.itemStyle = {opacity: 0}
          noiseAlarm.push(obj)
          noiseData.push(item.value)
        } else {
          if (start) {
            let obj = {
              name: this.dustStageData.noiseAlarm,
              value: this.dustStageData.noiseAlarm
            }
            obj.symbol = 'circle'
            obj.symbolSize = 1
            obj.label = {show: true, color: '#a8c5ed', position: [-62, -15]}
            noiseAlarm[index - 1] = obj
            start = false
          }
        }
      })
      this.temperatureOption.series[2].data = noiseData
      this.temperatureOption.series[3].data = noiseAlarm
    }
  }
}
